<template>
  <div class="app">
    <CesiumContainer :mapbox-token="mapboxToken" />
    <DebugPanel />
  </div>
</template>

<script setup>
import CesiumContainer from './components/CesiumContainer.vue'
import DebugPanel from './components/DebugPanel.vue'
// 导入全局单例访问方法
import { useGlobal } from '@/global'
// 或者直接导入 getCurrentInstance
import { getCurrentInstance } from 'vue'

// 配置
const mapboxToken = 'pk.eyJ1IjoiY3JpeXNvbiIsImEiOiJjazY5N2M5MWUwNDN0M2txdmR5dngyeno2In0.c28d-StW9f-vJ94XAMqBLw'

const test = () => {
  console.log('test')
  // 方式1: 使用 useGlobal composable (推荐)
  const globalSingleton = useGlobal()
  // 访问配置
  console.log('应用名称:', globalSingleton.getConfig('appName'))
  console.log('版本:', globalSingleton.getConfig('version'))
  console.log('调试模式:', globalSingleton.getConfig('debugMode'))
  console.log('缓存配置:', globalSingleton.getConfig('tileCache'))
  // 设置和获取全局数据
  globalSingleton.setData('testKey', 'Hello from test function!')
  console.log('全局数据:', globalSingleton.getData('testKey'))
  // 方式2: 通过 getCurrentInstance 访问全局属性
  const instance = getCurrentInstance()
  if (instance) {
    const globalFromInstance = instance.appContext.config.globalProperties.$globalSingleton
    console.log('通过实例访问:', globalFromInstance.getConfig('appName'))
  }
  // 获取全局单例的统计信息
  console.log('全局单例统计:', globalSingleton.getStats())
}

test()
</script>

<style scoped>
.app {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>